<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		filter：过滤器---函数
		对使用过滤器的数据，进行二次处理
		return返回的结果，就是过滤器过滤后的结果
		
		小胡子和v-bind 可以使用
		
		<div id="app">
			{{msg|Cap}}----{{msg}}
			<h1 :title="msg|Cap">111</h1>
			
	        <h2>{{ num | currency("￥",3) }}</h2>
		</div>
		
		<div id="app2">
			{{msga|Cap}}
		</div>
		
		<script>
			//全局过滤器
			//Vue.filter(名称,回调函数)
			Vue.filter("Cap",function(value){
				let firstStr=value.slice(0,1).toUpperCase();
				let lastStr=value.slice(1);
				return firstStr+lastStr;
			})
			
			// Vue.filter('currency',function(val,i,n){//变成钱
			//     var num = parseFloat(val).toFixed(n || 2);
			//     var re = /(\d{1,3})(?=(\d{3})+(?:\.))/g;
			//     var s = (i || "$") + num.replace(re, "$1,");
			//     return s;
			// })
			
			let vm=new Vue({
				el:"#app",
				data:{
				   msg:"hello",
				   num:100121332443
				},
				filters:{//局部过滤器
					// Cap(value){
					// 	//value--->处理的数据
					// 	//console.log(value);
						
					// 	//获取子数据，slice(开始下标,结束下标)  含头不含尾
					// 	let firstStr=value.slice(0,1).toUpperCase();
					// 	let lastStr=value.slice(1);
					// 	return firstStr+lastStr;
					// },
					currency(value,n="$",m=2){
						// n=n||"$";
						// m=m||2;
						return n+value.toFixed(m)
					}
				}
			})
			
			let vm2=new Vue({
				el:"#app2",
				data:{
					msga:"apple"
				}
			})
		</script>
	</body>
</html>
